<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
    <script>
        // S中对事件代理的理解以及应用场景
        // 事件代理:把一个元素响应事件的函数委托到另一个元素上，也叫事件委托
        // 事件流: 捕获阶段-->目标阶段-->冒泡阶段(事件委托)

        // 现在我让你做一个需求，就是页面里的li，点击他们就在控制台输出他们的内容，你是不是想到了这样写？
        // let lis = document.querySelectorAll('li');
        // for(let i = 0;i<lis.length;i++){
        //     lis[i].onclick = function(event){
        //         console.log(this.innerHTML,event.target.innerHTML);
        //     }
        // }

        // 但是我们利用事件委托，只需要给ul绑定点击事件，也能实现这个功能
        let ul = document.querySelector('ul');
        ul.onclick = function(event){
            console.log(event.target.innerHTML);
        }
    </script>
</body>

</html>